import { isHttps } from '@/utils/utils';
import { Image } from 'antd';
import ParkRecordView from './ParkRecordView';
import { AbnormalOrderTypeEnum, FREE_TITLE_ARR, OCCUPY_TITLE_ARR } from '../../abnormal-order';

interface StatusNotMatchViewProps {
  parkRecords: SpotParkingRecordItem[];
  composeImageUrl: string;
  type: AbnormalOrderType;
  ifPatrol?: boolean;
}
const StatusNotMatchView = (props: StatusNotMatchViewProps) => {
  const { parkRecords, composeImageUrl, type, ifPatrol } = props;
  const titleArr =
    type == AbnormalOrderTypeEnum.SENSOR_FREE_PATROL_OCCUPY || ifPatrol
      ? FREE_TITLE_ARR
      : OCCUPY_TITLE_ARR;
  return (
    <>
      {composeImageUrl && (
        <div style={{ textAlign: 'center', color: 'red' }}>
          <strong>本次巡检图片</strong>
          <div
            style={{
              background: 'black',
              border: '1px solid #FFF',
              margin: '0 auto',
            }}
          >
            <Image
              alt="巡检图片"
              style={{ maxHeight: 440 }}
              src={isHttps ? composeImageUrl : composeImageUrl.replace('http://', 'https://')}
            />
          </div>
        </div>
      )}
      {parkRecords && parkRecords.length > 0 && (
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <ParkRecordView record={parkRecords[2]} title={titleArr[2]} left={0} />
          <ParkRecordView record={parkRecords[1]} title={titleArr[1]} left={10} />
          <ParkRecordView record={parkRecords[0]} title={titleArr[0]} left={10} />
        </div>
      )}
    </>
  );
};

export default StatusNotMatchView;
